<template>
  <div class="app-container">
    <div class="filter-container">

      <el-form :model="listQuery" ref="filterForm">
        <el-row>
          <el-col :span="7" :offset="1">
            <el-form-item label-width="80px" label="时间范围:" class="postInfo-container-item">
              <el-date-picker
                v-model="daterange"
                type="daterange"
                value-format="yyyy-MM-dd"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="daterangeHandle">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
              查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>


    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" fit highlight-current-row
              style="width: 100%;margin-top:30px;">
      <el-table-column align="center" label="订单号">
        <template slot-scope="scope">
          {{ scope.row.order_no }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="奖品信息">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height:50px"
            :src="scope.row.prize_thumb"
            :preview-src-list="[scope.row.prize_thumb]"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          {{scope.row.prize_title}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="收货人">
        <template slot-scope="scope">
          <el-button v-if="scope.row.address_name" type="danger" size="mini" @click="userDetail(scope.row.user_id)">{{
            scope.row.address_name }}
          </el-button>
          <br>
          {{ scope.row.address_mobile }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="收货地址">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="中奖时间">
        <template slot-scope="scope">
          {{ scope.row.create_time}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          {{ statusShow[scope.row.status]}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="快递">
        <template slot-scope="scope">
          {{ scope.row.express_no}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==2" type="primary" size="mini" @click="handleView(scope)">
            立即发货
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getList"/>
    <el-dialog :visible.sync="dialogVisible" title="发货">
      <el-form :model="data" label-position="left" label-width="120px">
        <el-form-item label="快递单号" required>
          <el-input v-model="data.express_no" placeholder="快递单号"/>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="saveData">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleUser" title="用户信息">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-row :gutter="20">
            <el-col :span="12">
              <h2>基本信息</h2>
              <div class="user_info">微信昵称：{{userInfo.nickname}}</div>
              <div class="user_info">手机号：{{userInfo.mobile}}</div>
              <div class="user_info">地点：{{userInfo.user_address}}</div>
              <div class="user_info">OPENID：{{userInfo.openid}}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <h4 style="text-align: center">{{userInfo.total_cdkey_num}}</h4>
              <h4 style="text-align: center" >累计领红包次数</h4>
            </el-col>
            <el-col :span="6">
              <h4 style="text-align: center">￥{{userInfo.total_cdkey_money}}</h4>
              <h4 style="text-align: center" >累计领取红包金额</h4>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <h2>抽奖次数</h2>
          <div class="user_info" v-for="item in userInfo.user_prize">
            {{item.prize_title}}：{{item.prize_num}}
          </div>
          <div class="user_info">累计抽奖次数：{{userInfo.total_draw_num}}</div>
        </el-col>
      </el-row>
    </el-dialog>

    </div>
</template>

<script>
  import waves from '@/directive/waves' // waves directive

  import Pagination from '@/components/Pagination'
  import { getUserPrizeLogEntity, postUserPrizeLogEntity } from '../../api/activity'
  import { getUserInfo } from '../../api/user'

  const statusShow = {
    1: '待领取',
    2: '待发放',
    3: '已发放'
  }
  export default {
    components: { Pagination },
    directives: { waves },

    filters: {
      statusFilter(status) {
        const statusMap = {
          2: 'info',
          1: 'success'
        }
        return statusMap[status] ?? 'danger'
      },
      statusShowFilter(status) {
        return statusShow[status] ?? '无'
      }
    },
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        id: '',
        statusShow,
        specs: [],
        userInfo: {},
        daterange: [],
        data: {},
        list: [],
        dialogVisible: false,
        dialogVisibleUser: false,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      userDetail(user_id) {
        getUserInfo(user_id).then(res => {
          this.userInfo = res.data
          this.dialogVisibleUser = true
        })
      },
      daterangeHandle(value) {
        this.listQuery.begin_time = value[0]
        this.listQuery.end_time = value[1]
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      async getList() {
        this.listLoading = true
        const res = await getUserPrizeLogEntity(this.listQuery)
        this.list = res.data.data
        this.total = res.data.total
        this.listLoading = false
      },
      saveData() {
        postUserPrizeLogEntity(this.id, this.data).then(res => {
          this.$message.success('操作成功！')
          this.getList()
          this.dialogVisible = false
        })
      },
      handleView(scope) {
        this.id = scope.row.id
        this.dialogVisible = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    .roles-table {
      margin-top: 30px;
    }

    .permission-tree {
      margin-bottom: 30px;
    }
  }

  .user_info {
    padding: 5px 0;
  }
</style>
